<template >
    <div>

<div class='panel-wrap'  v-if="isShow" data-value="exit"  @click='colse_da'>
  <div class="vehicle-panel" :style="{background:backgroundColor}">
      <!-- height:'500rpx'; -->
  <div class='topItem'>
    <span class='check'>中/英</span>
    <span class='contentShow'>{{oinp}}</span>
    <span class='exit' @click='vehicleTap("ok")'>完成</span>

  </div>
  <!--省份简写键盘-->
  <div v-if="keyBoardType === 1">
    <div class="vehicle-panel-row">
      <div    class='vehicle-panel-row-button'  v-for="(item,idx) in keyVehicle1" @click='vehicleTap(item)' :key="idx+item">{{item}}</div>
    </div>
    <div class="vehicle-panel-row">
      <div    class='vehicle-panel-row-button'  v-for="(item,idx) in keyVehicle2" @click='vehicleTap(item)'  :key="idx+item">{{item}}</div>
    </div>
    <div class="vehicle-panel-row">
      <div    class='vehicle-panel-row-button'  v-for="(item,idx) in keyVehicle3" @click='vehicleTap(item)'  :key="idx+item">
        {{item}}
      </div>

    </div>

    <div class="vehicle-panel-row-last">
      <div     class='vehicle-panel-row-button vehicle-panel-ok'  @click='check'>{{checkTypeText}}</div>
      <div    class='vehicle-panel-row-button vehicle-panel-row-button-last' @click='vehicleTap(item)'  v-for="(item,idx) in keyVehicle4"
        :key="idx+item">{{item}}</div>
        <div     class='vehicle-panel-row-button vehicle-panel-row-button-img'>
      <img src='../assets/delete.png' class='vehicle-en-button-delete' @click='vehicleTap("delete")' mode='aspectFit'>
      </div>
    </div>
  </div>
  <!--英文键盘  -->
  <div v-else>
    <div class="vehicle-panel-row">
      <div    class='vehicle-panel-row-button vehicle-panel-row-button-number' @click='vehicleTap(item)'  v-for="(item,idx) in keyNumber"
        :key="item+idx">{{item}}</div>
    </div>
    <div class="vehicle-panel-row">
      <div    class='vehicle-panel-row-button'  v-for="(item,idx) in keyEnInput1" @click='vehicleTap(item)'   :key="idx+item">{{item}}</div>
    </div>
    <div class="vehicle-panel-row">
      <div    class='vehicle-panel-row-button'   v-for="(item,idx) in keyEnInput2" @click='vehicleTap(item)'   :key="idx+item">{{item}}</div>
    </div>
    <div class="vehicle-panel-row-last">
      <div     class='vehicle-panel-row-button vehicle-panel-ok'  @click='check'>{{checkTypeText}}</div>
      <div    class='vehicle-panel-row-button vehicle-panel-row-button-last' @click='vehicleTap(item)'   v-for="(item,idx) in keyEnInput3"
        :key="idx+item">{{item}}</div>
        <div     class='vehicle-panel-row-button vehicle-panel-row-button-img'>
        <img src='../assets/delete.png' class='vehicle-en-button-delete' @click='vehicleTap("delete")' mode='aspectFit'>
      </div>
    </div>
  </div>
</div>
</div>
    </div>
</template>

<script>
export default {
  props: {
    oinp: {
      type: String,
      default: ''
    },
    isShow: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      checkTypeText: 'ABC',
      keyVehicle1: ['京', '津', '渝', '沪', '冀', '晋', '辽', '吉', '黑', '苏'],
      keyVehicle2: ['浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘', '粤', '琼'],
      keyVehicle3: ['川', '贵', '云', '陕', '甘', '青', '蒙', '桂', '宁', '新'],
      keyVehicle4: ['藏', '使', '领', '警', '学', '港', '澳'],
      keyNumber: '1234567890',
      keyEnInput1: 'QWERTYUIOP',
      keyEnInput2: 'ASDFGHJKL',
      keyEnInput3: 'ZXCVBNM',
      backgroundColor: '#e7e8ea',
      keyBoardType: 1,
      buttonBorder: '1px solid #ccc'
    }
  },
  methods: {
    vehicleTap: function (event) {
      console.log(event, 'event')
      switch (event) {
        case 'delete':
          this.$emit('delete')
          this.$emit('inputchange', event)
          console.log(event, 'event')
          break
        case 'ok':
          if (this.oinp && !this.isVehicleNumber(this.oinp)) {
            this.$toast.fail('车牌号不合法')
            break
          }
          this.$emit('ok')
          break
        case 'exit':
          this.$emit('exit')
          break
        default:
          this.$emit('inputchange', event)
          this.keyBoardType = 1
          this.checkTypeText = '省份'
          this.check()
      }
    },
    // 车牌号验证方法
    isVehicleNumber (vehicleNumber) {
      let xreg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF]$)|([DF][A-HJ-NP-Z0-9][0-9]{4}$))/
      let creg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1}$/
      if (vehicleNumber.length == 7) {
        return creg.test(vehicleNumber)
      } else if (vehicleNumber.length == 8) {
        return xreg.test(vehicleNumber)
      } else {
        return false
      }
    },
    colse_da () {
      this.$emit('exit2')
    },
    check () {
      if (this.keyBoardType == 1) {
        this.keyBoardType = 2
        this.checkTypeText = 'ABC'
      } else if (this.keyBoardType == 2) {
        this.keyBoardType = 1
        this.checkTypeText = '省份'
      }
    }
  }
}
</script>

<style scoped>
:host {
  width: 100%;
}
.panel-wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}
.vehicle-panel {
  width: 100%;
  position: fixed;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 1000;
  background: #fff;
  padding-bottom: 1.36rem;
}
.jik {
  width: 1.2rem;
  height: 1.6rem;
}

.vehicle-panel-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.vehicle-panel-row-last {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.vehicle-panel-row-button {
  background-color: #fff;
  margin: .3rem 0.10rem;
  /* padding: 0.05rem; */
  width: 1.6rem;
  height: 2.3rem;
  text-align: center;
  line-height: 2.3rem;
  border-radius: 0.2rem;
  box-shadow:  0px 3px 3px rgb(109, 107, 107);
}
.vehicle-panel-row-button-number {
  /* background-color: #eee; */
}
/* .vehicle-panel-row-button-last {
  width: 2.8rem;
  height: 2.8rem;
  line-height: 2.8rem;
} */
.vehicle-hover {
  background-color: #ccc;
}
.vehicle-panel-row-button-img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.8rem;
  height: 2.3rem;
  line-height: 2.3rem;
  background: #cfd0d4;
}
.vehicle-en-button-delete {
  width: 1.1rem;
  height: 1.1rem;
}
.vehicle-panel-ok {
  background-color: #cfd0d4;
  color: black;
  width: 2.8rem;
  height: 2.3rem;
  line-height: 2.3rem;
}
.topItem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2rem;
  /* background: #f0f0f0; */
}
.exit {
  margin-right: 0.6rem;
  color: black;
  font-size: 38px;
  display: block;
  line-height: 1.5rem;
}
.check {
  opacity: 0;
  margin-left: 0.6rem;
  color: #6a7cff;
  font-size: 30px;
  display: block;
  line-height: 1.5rem;
}
</style>
